
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>蘑菇街2</title>
    <link rel="stylesheet" type="text/css" href="main.css "/>
    <script type="text/javascript "  src="js/jquery.js"></script>
    <script type="text/javascript " src="js/main.js"></script>
    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <!--<script type="text/javascript" src="js/lanrenzhijia.js"></script>-->
    <!--<link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css">-->



</head>
<body>
<div id="all">
    <div class="top">
        <div class="top-in" >
            <ul class="fr-denglu"  >
                <li   class="f1" style="position:absolute;left:1000px;">jiamiao123 |</li>
                <li   style="position:absolute;left:1080px;">消息2 |</li>
                <li   style="position:absolute;left:1160px;" >我的收藏  |</li>
                <li   style="position:absolute;left:1240px;">我的订单  |</li>
                <li   style="position:absolute;left:1310px;">
                    <img  style="width:20px;height:20px;"src="img2/11.jpg" alt=""/>
                    <a href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index4(%E8%B4%AD%E7%89%A9%E8%BD%A6).html">购物车1件  |</a></li>
                <li   style="position:absolute;left:1400px;">客户服务   |</li>
                <li   style="position:absolute;left:1480px;">
                    <img style="width:20px;height:20px;"src="img2/12.jpg" alt=""/>
                    我的小店  |</li>

            </ul>
            <div class="clr"></div>

        </div>

    </div>
    <div class="header">
        <div class="search">
            <div class="logo">
                <a href=""><img style="width:230px;height:60px;position:absolute;top:-110px;"src="img/2.png" alt="" /></a>
                <a href=""><img style="position:absolute;left:1100px;top:-139px;"src="img/1-4.png" alt=""/></a>

            </div>

            <div class="search-box fl">
                <div class="search-box-1">
                    <div class="form">

                        <div id="select">
                            <div class="drop">
                                <input type="text" class="text" value="搜商品"
                                       style="width:500px;height:31px;"/>
                                <ul style="background-color:white;color:black;" class="dropdown">
                                    <li ><a href="#">历史记录</a></li>
                                    <li ><a href="#">针织衫短袖</a></li>
                                    <li ><a href="#">碎花连衣裙</a></li>
                                    <li ><a href="#">百褶裙</a></li>
                                </ul>
                            </div>
                        </div>


                        <img  style="width:80px;height:38px;position:absolute;left:505px;top:50px;"src="img/4 (2).png" alt=""/>

                    </div>

                </div>
                <div class="hotwords">
                    <a href="">夏季套装</a>
                    <a href="">凉鞋</a>
                    <a href="">T恤</a>
                    <a href="">连衣裙</a>
                    <a href="">运动套装</a>
                    <a href="">斜跨小包</a>
                    <a href="">泳衣</a>
                    <a href="">高跟鞋</a>
                    <a href="">睡衣</a>


                </div>

            </div>
            <div class="nav">
                <div class="nav-in" >
                    <!-- 这里的全部分类以绝对定位的形式定位到导航栏中-->
                    <div class="allnav">
                        <div class="mt"><h2><a style="font-size:20px;color:white;position:absolute;left:70px;top:10px;"href="#">
                            全部商品</a></h2></div>
                        <div class="mc" style="position:absolute;left:300px;top:180px;width:230px;border:1px solid deeppink;">

                            <div class="part1" style="margin-top:40px;margin-left:20px;">
                        <span><h3>
                            <a  href="#">
                                <a style="color:black;font-size:15px;"
                                   href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index2.html">上衣</a></a>
                            <a style="color:deeppink;font-size:13px;"href="#">时尚套装 |</a>
                            <a  style="color:deeppink;font-size:13px;" href="#">雪纺衫 |</a>
                            <a style="font-size:13px;"href="">T恤 </a>
                        </h3></span>
                                <div style="border-top:1px silver dashed;margin-top:15px;"></div>


                                <!--<div class="i-mc"></div> &lt;!&ndash;导航展出的时候的下拉 &ndash;&gt;-->
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a  style="color:black;font-size:15px;"href="#">裙子</a>






                            <a  style="font-size:13px;"href="#">连衣裙 |</a>

                            <a  style="color:deeppink;font-size:13px;" href="#">半身裙 |</a>
                            <a   style="font-size:13px;"  href="#">雪纺裙 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">裤子</a>
                            <a style="font-size:13px;" href="#">短裤 |</a>
                            <a style="font-size:13px;" href="#">雪纺裙 |</a>
                            <a style="color:deeppink;font-szie:13px;" href="">半身裙 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">内衣</a>
                            <a style="color:deeppink;font-size:13px;" href="#">热销榜 |</a>
                            <a style="font-size:13px;" href="">睡衣套装 |</a>
                            <a style="font-size:13px;" href="">内裤</a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">鞋子</a>
                            <a style="color:deeppink;font-size:13px;"href="#">凉鞋 |</a>
                            <a style="font-size:13px;"  href="#">拖鞋 |</a>
                            <a style="font-size:13px;"  href="#">单鞋 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">男友</a>

                            <a style="font-size:13px;" href="#">短裤 |</a>
                            <a style="font-size:13px;" href="#">帆布鞋 |</a>
                            <a style="color:deeppink;font-size:13px;" href="#">T恤 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">包包</a>
                            <a style="font-size:13px;" href="#">夏上新 |</a>
                            <a style="color:deeppink;font-size:13px;"href="#">女包 |</a>
                            <a style="font-size:13px;" href="#">男包 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">运动</a>
                            <a style="font-size:13px;"  href="#">运动套装 |</a>
                            <a style="color:deeppink;font-size:13px;"href="#">运动鞋 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"href="#">美妆</a>
                            <a style="color:deeppink;font-size:13px;" href="#">夏日防晒 |</a>
                            <a style="font-size:13px;"  href="#">超值套装 |</a>
                            <a style="font-size:13px;" href="">面膜 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;" href="#">配饰</a>
                            <a style="font-size:13px;" href="#">墨镜 |</a>
                            <a  style="color:deeppink;font-size:13px;" href="">项链 |</a>
                            <a style="font-size:13px;" href="">男士配饰 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;" href="#">家居</a>
                            <a style="font-size:13px;" href="#">新品 |</a>
                            <a style="font-size:13px;" href="#">四件套 |</a>
                            <a style="color:deeppink;font-size:13px;" href="">小家具 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;"  href="#">母婴</a>
                            <a style="font-size:13px;" href="#">初秋新品 |</a>
                            <a style="color:deeppink;font-size:13px;" href="#">童装 |</a>
                            <a style="font-size:13px;" href="">孕妇装 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                                <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                            </div>

                            <div class="part2" style="margin-top:10px;margin-left:20px;margin-bottom:20px;">
                        <span><h3>
                            <a style="color:black;font-size:15px;" href="#">零食</a>
                            <a  style="font-size:13px;" href="">休闲食品 |</a>
                            <a style="font-size:13px;" href="">进口食品 |</a>
                            <a  style="color:deeppink;font-size:13px;" href="">肉食 </a>
                        </h3></span>
                                <div class="i-mc"></div> <!--导航展出的时候的下拉 -->

                            </div>

                            <!--<div class="part2" style="margin-top:10px;margin-bottom:10px;margin-left:20px;">-->
                            <!--<span><h3>-->
                            <!--<a style="color:black;font-size:15px;" href="#">百货</a>-->
                            <!--<a style="font-size:13px;"href="#">新品 |</a>-->
                            <!--<a style="color:deeppink;font-size:13px;" href="#">玻璃杯 |</a>-->
                            <!--<a style="font-size:13px;"href="#">晴雨伞 </a>-->
                            <!--</h3></span>-->
                            <!--<div class="i-mc"></div> &lt;!&ndash;导航展出的时候的下拉 &ndash;&gt;-->

                            <!--</div>-->

                        </div>
                    </div>
                    <ul class="mainnav">
                        <li class="fl"><strong>
                            <a style="font-size:20px;margin-left:20px;color:black;"href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index3(%E5%9B%A2%E8%B4%AD).html">
                                团购</a>

                        </strong></li>

                        <li class="fl"><strong>
                            <a style="font-size:20px;margin-left:20px;color:black; "
                            href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index3(%E5%9B%A2%E8%B4%AD).html">
                            快抢</a></strong></li>

                    </ul>



                    <div id="box">
                        <ul class="list"  style="width:700px; height:500px;position:absolute;
            left:-150px;top:0px;">


                                <li style="float:right;"class="current">
                                    <a href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index2.html">
                                        <img src="img/6.jpg"  style="width:715px;height:700px;"  /></a>
                                </li>








                            <li style="float:right;"><img src="img/7.jpg"/>

                            </li>




                          

                            <li style="float:right;"><img src="img/8.jpg"/></li>
                            <li style="float:right;"><img src="img/14.jpg" /></li>
                            <li style="float:right;"><img src="img/10.jpg" /></li>
                        </ul>
                        <ul class="count" style="position:absolute;left:450px;top:400px;">
                            <li class="current"><a href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index2.html">1</a></li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>

                    </div>
                </div>
            </div>


            <!--<div class="du1" style="position:absolute;width:200px;height:500px;border:1px solid red;left:1250px;top:220px;">-->
            <div> <a href =""><img style="position:absolute;
                         left:1280px;width:200px;
                  top:250px;"src="img\15.jpg" alt=""/></a>
            </div>
            <div><a href=""><img style="position:absolute;
                  left:1280px;top:500px;width:200px;"src="img\9.jpg" alt=""/></a>
            </div>
        </div>

        <div class="showcase" style="width:1268px;height:350px;border:1px solid #ccc;
              position:absolute;top:900px;left:300px;">
            <div class="a">
                <img style="position:absolute;height:350px;width:250px;left:10px;margin-top:0px;"src="img\1.jpg" alt=""/>

                <img style="position:absolute;height:350px;width:250px;left:280px;margin-top:0px;"src="img\3.png" alt=""/>
                <img style="position:absolute;left:870px;top:-20px;margin-top:20px;height:160px;"src="img\2.jpg" alt=""/>
                <img style="position:absolute;left:870px;top:170px;margin-top:20px;height:160px;"src="img\18.jpg" alt=""/>
                <img style="width:300px;height:350px;position:absolute;left:550px;top:-120px;border:1px solid #ccc;
                      margin-top:120px;"src="img\1-5.jpg" alt=""/>


            </div>

        </div>


        <div style="position:absolute;font-size:15px;left:900px;color:black;
                 top:1450px;"><h1><b>蘑菇良品</b></h1></div>
        <img style="position:absolute;left:300px;top:1450px;"src="img/1-10.png " alt=""/>
        <img style="position:absolute;left:1100px;top:1450px;"src="img/1-11.png " alt=""/>

        <div class="one" style="width:1268px;height:600px;
              position:absolute;top:1500px;left:300px;">
            <div class="b">
                <img style="position:absolute;left:10px;top:20px;width:220px;" src="img/33.png " alt=""/>


                <img style="position:absolute;left:15px;top:250px;width:200px;" src="img/34.png " alt=""/>

                <div class="part2" style="margin-top:20px;position:absolute;top:520px;left:20px;">
                             <span><h3>
                                 <a href="#">初秋新款</a><a href="">显瘦连衣裙</a><a href="">百搭T恤</a>
                             </h3></span>
                    <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                </div>

                <div class="part2" style="margin-top:20px;position:absolute;top:440px;left:20px;">
                             <span><h3>
                                 <a href="#">热卖裤装</a><a href="">WHT系列</a><a href="">清新衬衫</a>
                             </h3></span>
                    <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                </div>

                <div class="part2" style="margin-top:20px;position:absolute;top:480px;left:20px;">
                             <span><h3>
                                 <a href="#">酷炫牛仔</a><a href="">必备打底</a><a href="">俏皮半身裙</a>
                             </h3></span>
                    <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                </div>
                <div class="b1">
                    <a href="#" style="position:absolute;left:280px;top:20px;"><img src="img\37.jpg" alt=""/></a>
                    <a href="#" style="position:absolute;left:620px;top:20px;"><img src="img\38.jpg" alt=""/></a>
                    <a href="#" style="position:absolute;left:950px;top:20px;"><img src="img\39.jpg" alt=""/></a>
                </div>
                <div  class="b2">
                    <a href="#" style="position:absolute;left:300px;top:400px;">
                        <img src="img\40.jpg" alt=""/>
                        <ol>
                            <li><b>初秋新款</b></li>
                            <li>新品折扣抢先买</li>
                        </ol>
                    </a>
                    <a href="#" style="position:absolute;left:650px;top:400px;">
                        <img src="img\41.jpg" alt=""/>
                        <ol >
                            <li><b>懒人必备套装</b></li>
                            <li>一套出街简约大方</li>
                        </ol>


                    </a>
                    <a href="#" style="position:absolute;left:950px;top:400px;">
                        <img src="img\42.jpg" alt=""/>
                        <ol>
                            <li><b>四季裤装</b></li>
                            <li>必备款式一天一件</li>
                        </ol>
                    </a>

                </div>


            </div>



        </div>



        <div style="position:absolute;font-size:15px;left:900px;color:black;
                 top:2200px;"><h1><b>品牌站</b></h1></div>
        <img style="position:absolute;left:300px;top:2200px;"src="img/1-10.png " alt=""/>
        <img style="position:absolute;left:1100px;top:2200px;"src="img/1-11.png " alt=""/>


        <div class="two" style="width:1240px;height:480px;
              position:absolute;top:2250px;left:330px;">

            <div class="two1">
                <a href=""><img src="img\43.jpg" alt=""/></a>
                <a href=""><img style="width:200px;height:260px;"src="img\1-1.png" alt=""/></a>
            </div>

            <div class="two2">
                <a href=""><img style="width:300px;height:480px;"src="img\44.jpg" alt=""/></a>
            </div>


            <div class="two3" >
                <div style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:-495px;top:0px;">
                    <a  href="#" >
                        <img style="position:absolute;left:20px;top:20px;"src="img\45.png" alt=""/>
                        <ul style="position:absolute;left:100px;top:220px;" ><li>舞蹈鞋</li></ul>
                    </a>
                </div>

                <div style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:-245px;top:0px;">
                    <a  href="#">
                        <img style="position:absolute;left:40px;top:20px;"src="img\46.png" alt=""/>
                        <ul style="position:absolute;left:100px;top:220px;"><li>夏季衣服</li></ul>
                    </a>
                </div>

                <div style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:-247px;top:0px;">
                    <a  href="#">
                        <img style="position:absolute;left:270px;top:20px;"src="img\47.png" alt=""/>
                        <ul style="position:absolute;left:350px;top:180px;"><li>夏季衣服</li></ul>
                    </a>
                </div>

                <div style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:-495px;top:240px;">
                    <a  href="#">
                        <img style="position:absolute;left:20px;top:20px;"src="img\48.png" alt=""/>
                        <ul style="position:absolute;left:90px;top:200px;"><li>夏季衣服</li></ul>
                    </a>
                </div>

                <div  style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:-245px;top:240px;">
                    <a  href="#">
                        <img style="position:absolute;left:50px;top:20px;"src="img\49.png" alt=""/>
                        <ul style="position:absolute;left:90px;top:200px;"><li>夏季衣服</li></ul>
                    </a>
                </div>

                <div  style="border:1px solid #ccc;width:235px;height:240px;position:absolute;left:5px;top:240px;">
                    <a  href="#">
                        <img style="position:absolute;left:50px;top:20px;"src="img\50.png" alt=""/>
                        <ul style="position:absolute;left:90px;top:200px;"><li>夏季衣服</li></ul>
                    </a>
                </div>


            </div>







        </div>



        <div style="position:absolute;font-size:15px;left:900px;color:black;
                 top:2900px;"><h1><b>潮流女装</b></h1></div>
        <img style="position:absolute;left:300px;top:2900px;"src="img/1-10.png " alt=""/>
        <img style="position:absolute;left:1100px;top:2900px;"src="img/1-11.png " alt=""/>

        <div class="three" style="width:1240px;height:500px;
              position:absolute;top:3000px;left:330px;">
            <div class="three1">
                <a href="#"><img src="img\51.jpg" alt=""/></a>
                <a href=""><img style="width:200px;height:300px;top:205px;"src="img\1-2.png" alt=""/></a>
            </div>

            <div class="three2">
                <a href="#"><img src="img\52.jpg" alt=""/></a>
            </div>

            <div class="three3">
                <div style="width:250px;height:240px;position:absolute;left:505px;top:0px;border:1px solid #ccc;position:absolute;">
                    <a  href="#">
                        <img  style="position:absolute;left:40px;top:20px;"src="img\53.png" alt=""/>
                        <ul><li style="position:absolute;left:100px;top:200px;">显瘦短裤</li></ul>
                    </a>
                </div>
                <div  style="border:1px solid #ccc;width:250px;height:240px;position:absolute;left:750px;top:0px;" >
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:20px;"src="img\54.png" alt=""/>
                        <ul><li style="position:absolute;left:100px;top:200px;">显瘦短裤</li></ul>
                    </a>
                </div>

                <div style="border:1px solid #ccc;width:240px;height:240px;left:1000px;top:0px;">
                    <a  href="#">
                        <img  style="position:absolute;left:1030px;top:20px;"src="img\55.png" alt=""/>
                        <ul><li style="position:absolute;left:1100px;top:200px;">显瘦短裤</li></ul>
                    </a>
                </div>

                <div style="border:1px solid #ccc;width:250px;height:260px;position:absolute;left:505px;top:240px;">
                    <a  href="#">
                        <img  style="position:absolute;left:30px;top:30px;"src="img\56.png" alt=""/>
                        <ul><li style="position:absolute;left:80px;top:220px;">显瘦短裤</li></ul>
                    </a>
                </div>

                <div style="position:absolute;left:750px;top:240px;border:1px solid #ccc;width:250px;height:260px;">
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:20px;"src="img\57.png" alt=""/>
                        <ul><li style="position:absolute;left:110px;top:220px;">显瘦短裤</li></ul>
                    </a>
                </div>

                <div style="position:absolute;left:1000px;top:240px;border:1px solid #ccc;width:240px;height:260px;">
                    <a  href="#"><img  style="position:absolute;left:45px;top:20px;"src="img\58.png" alt=""/></a>
                    <ul><li style="position:absolute;left:100px;top:220px;">显瘦短裤</li></ul>
                </div>
            </div>




        </div>


        <div style="position:absolute;font-size:15px;left:900px;color:black;
                 top:3700px;"><h1><strong>辣妈潮宝</strong></h1>

        </div>
        <img style="position:absolute;left:300px;top:3700px;"src="img/1-10.png " alt=""/>
        <img style="position:absolute;left:1100px;top:3700px;"src="img/1-11.png " alt=""/>

        <div class="four" style="width:1200px;height:500px;
              position:absolute;top:3750px;left:330px;border:1px solid #ccc;">
            <div class="four1">
                <a href="#"><img src="img\59.jpg" alt=""/></a>
                <a href=""><img style="width:200px;height:300px;top:205px;position:absolute;left:0px;"src="img\1-3.png" alt=""/></a>
            </div>

            <div class="four2">
                <a href="#" style="position:absolute;left:200px;top:0px;"><img src="img\60.jpg" alt=""/></a>
            </div>

            <div class="four3">
                <div  style="position:absolute;left:505px;top:0px;width:240px;height:260px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:30px;width:150px;height:200px;"src="img\61.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:230px;"><li>益智玩具</li></ul>
                </div>

                <div style="position:absolute;left:746px;top:0px;width:240px;height:260px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:60px;width:150px;"src="img\62.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:230px;"><li>益智玩具</li></ul>
                </div>

                <div style="position:absolute;left:988px;top:0px;width:210px;height:260px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:50px;width:150px;"src="img\63.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:230px;"><li>益智玩具</li></ul>
                </div>

                <div style="position:absolute;left:505px;top:260px;width:240px;height:240px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:50px;top:30px;width:150px;"src="img\64.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:200px;"><li>益智玩具</li></ul>
                </div>

                <div style="position:absolute;left:746px;top:260px;width:240px;height:240px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:40px;top:30px;width:150px;"src="img\65.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:200px;"><li>益智玩具</li></ul>
                </div>

                <div style="position:absolute;left:988px;top:260px;width:210px;height:240px;border:1px solid #ccc;">
                    <a  href="#">
                        <img  style="position:absolute;left:40px;top:30px;width:150px;height:200px;"src="img\66.jpg" alt=""/></a>
                    <ul  style="position:absolute;left:100px;top:200px;"><li>益智玩具</li></ul>
                </div>
            </div>




        </div>

        <div class="footer-1" style="position:absolute;top:4500px;width:100%;height:300px;border:1px solid #ccc;">
            <div class="footer-1-in">
                <div class="f0">
                    <img style="width:100px;height:50px;position:absolute;top:40px;left:300px;"src="img\2.png" alt=""/>
                    <ul style="position:absolute;top:90px;left:300px;">
                        <img src="img\24.png" alt=""/>
                        <li>营业执照注册号：331006000129004</li>
                        <li></li>增值电信业务经营许可证：浙B2-20110349</li>
                        <li >浙公网安备：331006000129004</li>
                        <li>@2016 Mogujie.com 杭州卷瓜网络有限公司</li>

                    </ul>


                </div>
                <dl class=" fl fore1" style="left:700px;position:absolute;top:50px;">
                    <dt>
                        <b></b>
                        <strong>公司</strong>
                    </dt>
                    <dd>
                        <div><a href="#">关于我们</a></div>
                        <div><a href="#">招聘信息</a></div>
                        <div><a href="#">联系我们</a></div>

                    </dd>
                </dl>
                <dl class="fl fore2" style="left:900px;position:absolute;top:50px;">
                    <dt>
                        <b></b>
                        <strong>消费者</strong>
                    </dt>
                    <dd>
                        <div><a href="#">消费者服务</a></div>
                        <div><a href="#">意见反馈</a></div>
                        <div><a href="#">手机版下载</a></div>

                    </dd>
                </dl>
                <dl class="fl fore3" style="left:1100px;position:absolute;top:50px;">
                    <dt>
                        <b></b>
                        <strong>商家</strong>
                    </dt>
                    <dd>
                        <div><a href="#">商家入驻</a></div>
                        <div><a href="#">商家后台</a></div>
                        <div><a href="#">蘑菇街学院</a></div>
                        <div><a href="#">商家社区</a></div>

                    </dd>
                </dl>


                <div class="fr peisong" style="position:absolute;left:1300px;top:50px;">

                    <div class="peisong-top"><h3>权威认证</h3></div>
                    <div class="peisong-content">

                    </div>
                </div>
                <span class="clr"></span>
            </div>
        </div>
        <div class="footer-2"  style="position:absolute;top:4750px;left:400px;">
            <div class="footer-2-in">
                <div class="links">
                    <a href="#">友情链接：</a>
                    <a href="#">蘑菇街游戏</a>
                    <a href="#">淘粉吧</a>
                    <a href="#">穿衣搭配</a>
                    <a href="#">蘑菇街男装</a>
                    <a href="#">蘑菇街鞋子</a>
                    <a href="#">蘑菇街包包</a>
                    <a href="#">QQ钱包</a>
                    <a href="#">家居网</a>
                    <a href="#">时尚品牌网</a>
                    <a href="#">装修</a>
                    <a href="#">蘑菇街母婴</a>
                    <a href="#">衣联网</a>
                    <a href="#">播视网视屏</a>
                    <a href="#">慧聪网</a>

                </div>

            </div>

        </div>

        <div>

        </div>

    </div>
</div>
</div>
</div>
</body>
</html>
<script>
    $(function(){
        $('#select .drop').hover(function(){
            $('#select .dropdown').show();
        },function(){
            $('#select .dropdown').hide();
        })
    })




    window.onload = function(){
        //第一步，选取要操作的元素
        var box = document.querySelectorAll('#box')[0];
        var oUl = document.querySelectorAll('.list')[0];
        var aLi = document.querySelectorAll('.list li');
        var aImg = document.querySelectorAll('img');
        var aNum = document.querySelectorAll('.count li');
        var index = 0;
        var timer = dd = null;
        var opa = 0;



        //先写手动的
        for(var i=0;i<aNum.length;i++){
            //先把下标存储一下
            aNum[i].index = i;
            aNum[i].onmouseover = function(){
                show(this.index);
            }
        }
        function show(a){
            //当前图片显示的时候，那么，其余的图片应该都是隐藏状态吧
            //这里，要改变下index的当前值就好了
            index = a;
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.opacity = 0;
                aNum[i].className = '';

            }
            //让当前的图片显示
            aNum[a].className = 'current';
            aLi[a].style.opacity = 1;
            /*dd = setInterval(function(){
             opa  = opa + 2;
             aLi[index].style.opacity = opa / 100;
             if(opa == 100){
             opa = 0;
             clearInterval(dd);
             }
             },10);*/
        }


        //再写自动的
        function autoplay(){
            /*clearInterval(dd);*/
            timer = setInterval(function(){
                index++;
                if(index >= aLi.length){
                    index = 0;
                }
                console.log(index);
                show(index);
            },2000)
        }
        autoplay();

        //当鼠标移入这个box的时候，这个autoplay停止,移出的时候继续

        box.onmouseover = function(){
            clearInterval(timer);

        }
        box.onmouseout = function(){
            autoplay();
        }





    }


</script>

